<template>
  <div class="layout-container  flex flex-v">
    <!--头部-->
    <div class="main-head">
      <van-nav-bar
        fixed
        title="信息"
        left-text="返回"
        right-text="按钮"
        left-arrow
      />
    </div>

    <div class="main-box">
      <!--头部-->
      <div class="info-head-box flex flex-align-center">
        <div class="head-img-box van-hairline--surround">
          <img src="/static/images/index/1703081133443720835.png" alt="" class="head-img"/>
        </div>
        <div class="head-img-title flex flex-v">
          <span class="title">XXXX</span>
          <div class="title-info flex flex-align-center">
            <van-tag type="success">标签</van-tag>
            <span class="tip">10-20 更新</span>
            <span class="tip">来源: 黑猫吃喝玩乐</span>
          </div>
        </div>
      </div>
      <!--内容区块-->
      <div class="info-content-box">
        <p class="content-port">我是一个果农，感谢平台，继嘎啦苹果之后红将军苹果已经上市，口感好，还有少量核桃，需要加V,13874124993，诚信果农，非诚勿扰，骗子绕行。</p>
        <div class="content-img van-hairline--surround flex flex-pack-center flex-align-center">
          <img src="http://image.chwlsq.com/1/info/892578_1709050739078318420.jpg" alt="" />
        </div>

        <!--点赞操作-->
        <div class="content-opera-box flex">
          <div class="opera-box flex flex-align-center flex-pack-center">
            <img src="/static/images/index/liulan.png" alt="" />
            <span>4316人浏览</span>
          </div>
          <div class="opera-box flex flex-align-center flex-pack-center">
            <img src="/static/images/index/zan1.png" alt="" />
            <span>4316人点赞</span>
          </div>
          <div class="opera-box flex flex-align-center flex-pack-center">
            <img src="/static/images/index/zhuan.png" alt="" />
            <span>4316人转发</span>
          </div>
        </div>

        <!--点赞排行榜-->
        <div class="content-like-box flex flex-pack-center">
          <div class="like-item flex flex-align-center flex-pack-center">
            <span class="like-tip flex flex-align-center flex-pack-center">12<br/>赞</span>
          </div>
          <div class="like-item" v-for="i in 10" :key="i">
            <img src="http://image.chwlsq.com/1/info/892578_1709050739078318420.jpg" alt="" />
          </div>
        </div>

      </div>

      <!--联系方式-->
      <div class="content-tel-box">
        <van-cell-group>
          <van-cell :title="title">
            <template slot="right-icon">
              <van-tag type="danger" size="large">拨打电话</van-tag>
            </template>
          </van-cell>
        </van-cell-group>
        <div class="van-hairline--bottom tel-info">
          联系我时，请说是在<span class="tip">黑猫微圈</span>上看到的
        </div>
      </div>

      <!--红包份量-->
      <div class="money-content-box">
        <van-cell-group>
          <van-cell>
            <template slot="title">
              <span class="money-sub-box">已抢<span class="active">5</span>/5份, 共<span class="active">1.00</span>/1.00元</span>
            </template>
          </van-cell>
          <van-cell v-for="(i,idx) in 5" :key="i">
          <template slot="title">
            <img src="http://image.chwlsq.com/1/info/892578_1709050739078318420.jpg" alt="暂无" class="img-des" />
            <span class="money-content--name">安**生</span>
            <van-button size="mini" type="danger" v-if="idx === 0">手气最佳</van-button>
          </template>
          <template slot="right-icon">
            <img src="" alt="" />
            <span class="money-content-num">0.20元</span>
          </template>
        </van-cell>
        </van-cell-group>
      </div>

      <!--留言-->
      <div class="content-leaveword-box">
        <van-cell title="留言">
          <template slot="right-icon">
            <van-tag type="success" @click="show = true">我要留言</van-tag>
          </template>
        </van-cell>
        <div class="van-hairline--bottom leaveword-info-box">
            <div class="info-title flex flex-align-center flex-pack-justify">
              <div class="title-left flex flex-align-center">
                <img src="/static/images/index/1703081133443720835.png" alt="" class="info-img"/>
                <div class="flex flex-v info-time">
                  <span class="info-name">罗胖胖</span>
                  <span class="info-date">2月3日</span>
                </div>
              </div>
              <van-button plain type="info" size="small" @click="show = true">回复</van-button>
            </div>
            <p class="info-content">键盘摸的冰凉凉键盘摸的冰凉凉键盘摸的冰凉凉键盘摸的冰凉凉</p>
            <div class="van-hairline--top info-replay">
              <p class="replay-box"><span class="replay-user">罗胖胖</span>: 加油,你是最胖的.</p>
              <p class="replay-box"><span class="replay-user">罗胖胖</span>回复<span class="replay-user">聂胖胖</span>: 希望你所拼命争取的，最后都能如你所愿。</p>
              <p class="replay-box"><span class="replay-user">聂胖胖 </span>: 加油,你是最胖的.</p>
            </div>
        </div>
      </div>
    </div>
    <!--Dialog弹窗-->
    <van-dialog
      v-model="show"
      show-cancel-button
      title="留言"
      :before-close="beforeClose">
      <van-field
        v-model="message"
        type="textarea"
        placeholder="我也说一句"
        rows="1"
        :autosize="autoSize"/>
    </van-dialog>
  </div>
</template>

<script>
import { NavBar, Tag, Cell, Field, Button, CellGroup } from 'vant'
export default {
  name: 'info',
  components: {
    [NavBar.name]: NavBar,
    [Tag.name]: Tag,
    [Cell.name]: Cell,
    [Field.name]: Field,
    [Button.name]: Button,
    [CellGroup.name]: CellGroup
  },
  data () {
    return {
      title: '联系方式：13874124993',
      value: '',
      show: false,
      message: '',
      autoSize: {maxHeight: 100}
    }
  },
  methods: {
    beforeClose (action, done) {
      if (action === 'confirm') {
        setTimeout(done, 1000)
      } else {
        done()
      }
    }
  }
}
</script>

<style scoped lang="less">
  .layout-container {
    /*width:100%;*/
    height:100%;
    overflow: hidden;
    // 中心区域
    .main-box{
      z-index: 0;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      margin-top: 46px;
      .info-head-box{
        border-top: 10px solid @white-gray;
        background-color: @white;
        padding: 10px;
        .head-img-box{
          padding: 2px;
          .head-img{
            width: 50px;
            height: 50px;
          }
        }
        .head-img-title{
          margin-left: 10px;
          .title{
            width: 100%;
            font-size: 14px;
            color: #4395f5;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .title-info {
            margin-top: 8px;
            span.tip{
              display: inline-block;
              margin-left: 10px;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
      .info-content-box{
        padding: 8px;
        background-color: @white;
        p.content-port{
          color: #666;
          font-size: 14px;
          text-align: justify;
          padding-bottom: 10px;
          margin: 0;
        }
        .content-img{
          padding: 5px;
          margin-bottom: 5px;
          img{
            width: 352px;
            height: 275px;
          }
        }
        // 操作
        .content-opera-box{
          height: 38px;
          .opera-box{
            margin-left: 10px;
            img{
              width: 20px;
              height: 20px;
              margin-right: 8px;
            }
            span {
              color: #888;
              font-size: 14px;
            }
          }
        }
        // 点赞列表
        .content-like-box{
          flex-wrap: wrap;
          .like-item{
            width: 32px;
            height: 32px;
            margin-right: 8px;
            margin-bottom: 8px;
            img, .like-tip{
              width: 32px;
              height: 32px;
              border-radius: 100%;
            }
            .like-tip{
              font-size: 12px;
              color: #666;
              background-color: #e1e1e1;
            }
          }
        }
      }
      // 联系方式
      .content-tel-box{
        border-top: 10px solid @white-gray;
        border-bottom: 10px solid @white-gray;
        .tel-info {
          font-size: 14px;
          background-color: @white;
          padding: 15px;
          color: rgb(89, 89, 89);
          span{
            color: rgb(0, 112, 192);
          }
        }
        .van-cell{
          width: auto;
        }
      }

      // 红包
      .money-content-box{
        border-bottom: 5px solid @white-gray;
        .van-cell{
          width: auto;
          .van-cell__title{
            display: flex;
            align-items: center;
          }
        }
        .money-content-num{
          font-size: 12px;
          color: red;
        }
        img.img-des{
          width: 32px;
          height: 32px;
          border-radius: 100%;
        }
        .money-content--name{
          margin:0 8px;
        }
        .money-sub-box{
          font-size: 12px;
          .active {
            color: red;
          }
        }
      }

      // 留言
      .content-leaveword-box{
        width: 100%;
        .van-cell{
          width: auto;
        }
        .leaveword-info-box{
          padding: 8px;
          background: @white;
          .info-title{
            .title-left{
              .info-img{
                width: 35px;
                height: 35px;
              }
              .info-time{
                margin-left: 15px;
                .info-name{
                  font-size: 16px;
                  color: #285c9d;
                }
                .info-date {
                  color: #aaa;
                  line-height: 1.2;
                  font-size: 12px;
                }
              }
            }
          }
          .info-content{
            font-size: 16px;
            margin: 8px 0;
          }
          // 回复
          .info-replay{
            padding: 8px 0;
            .replay-box{
              line-height: 1.6;
              font-size: 14px;
              font-weight: 400;
              margin: 0;
              .replay-user{
                color: #285c9d;
              }
            }
          }
        }
      }
     }
  }
</style>
